<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
        }
    </style>
</head>
<body>

 <div class="container">
     <div class="row">
         <nav class="navbar navbar-default navbar-static-top">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <a class="navbar-brand" href="../index.html">首页</a>
                 </div>
                 <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0)">Link</a></li>
                    <li><a href="javascript:void(0)">Link2</a></li>
                 </ul>
             </div>
         </nav>
     </div>
     <div class="row demo" ng-app="MyAPP">
         <h3>Angularjs省市区联动示例</h3>
         <div class="row" ng-controller="CityController">
             <select ng-model="areaItem" ng-options="c.name for c in areasArr"></select>
             <select ng-model="areaNextItem" ng-options="n.name for n in areaNext"></select>
             <select ng-model="gareaNextItem" ng-options="g.name for g in gareaNext"></select>
         </div>
     </div>

 </div>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>

    var allAreas = [{
        name:'北京市',
        code:'11',
        items:[{
            code:'110100',
            name:'市辖区',
            items:[{
                code:'110101',
                name:'东城区'
            },{
                code:'110102',
                name:'西城区'
            }]
        },{
            code:'110200',
            name:'县',
            items:[{
                code:'110228',
                name:'密云县'
            },{
                code:'110229',
                name:'延庆县'
            }]
        }]
    },{
        name:'北京市1',
        code:'11',
        items:[{
            code:'110100',
            name:'市辖区1',
            items:[{
                code:'110101',
                name:'东城区'
            },{
                code:'110102',
                name:'西城区'
            }]
        },{
            code:'110200',
            name:'县1',
            items:[{
                code:'110228',
                name:'密云县'
            },{
                code:'110229',
                name:'延庆县'
            }]
        }]
    }];

    var app=angular.module("MyAPP",[]);
    app.controller("CityController",function($scope){
        $scope.areasArr = allAreas;
        $scope.areaItem = $scope.areasArr[0];

        $scope.$watch('areaItem', function(val){
            $scope.areaNext = val.items;
            $scope.areaNextItem = $scope.areaNext[0];
        });

        $scope.$watch('areaNextItem', function(val){
            $scope.gareaNext = val.items;
            $scope.gareaNextItem = $scope.gareaNext[0];
        });
    });
</script>
